<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片缩放效果</title>
    <style>
       .four{
            width: 500px;
            height: 500px;
            background-image: url(imag/th.jfif);
            background-size: 500px 500px;
            border-style: solid;
            border-color: white;
            box-sizing: border-box;
            margin: 70px auto;
            float: left;

        }
        div:hover.four{
            background-size:600px 600px;
            transition-property:background-size;
            transition-duration: 4s;
            transition-timing-function: ease-in-out;
            border-radius: 50%;
        }
       
        
        .two{
        display: inline-block;
            width: 500px;
            height: 500px;
            background-image: url(imag/th.jfif);
            background-repeat: no-repeat;
            background-position: center center;
            background-size:500px 500px;
            margin: 800px 500px;
            outline: none;
            border: 0;
            position: absolute;
            top: -720px;
            left: 0px;
        }
         a:hover.two{
            
            background-size: 600px 600px;
            transition-property: background-size;
            transition-duration:5s;/*不起作用*/
            transition-timing-function:ease-in-out;
         }
         .one{
        
        display: inline-block;
            width: 500px;
            height: 500px;
            background-image: url(imag/th.jfif);
            background-repeat: no-repeat;
            background-position: center center;
            background-size:500px 500px;
            margin: 800px 500px;
            outline: none;
            border: 0;
        }
        .one:hover{
            background-size: 600px 600px;
            transition-property: background-size;
            transition-duration:5s;
            transition-timing-function:ease;
            transition-delay: 1s;
        }
        .three{  
         display: inline-block;
            width: 500px;
            height: 500px;
            background-image: url(imag/th.jfif);
            background-repeat: no-repeat;
            background-position: center center;
            background-size:500px 500px;
            margin: 800px 500px;
            outline: none;
            border: 0;
        }
         .three:hover{
         background-size: 600px 600px;
            transition: background-size 10s ease-in-out 2s;/*顺序不可以调换,a:hover.three也可以*/
         }
         .five,.six,.for,.love,.hope,.las{
            width: 400px;
            height: 400px;
            background-image: url(imag/th.jfif);
            background-repeat: no-repeat;
            margin-bottom: 2px;
         }
         .five:hover{
            transform:skew(30deg,30deg);

         }
         .six:hover{
            transform: translate(200px,50px);

         }
         .for:hover{
          transform: scale(1.5,1.5);
         }
         .love:hover{
            transform: scale(-1,-1);
         }
         .hope:hover{
            transform: scale(0.4,0.5);
         }
         .las{
           /* text-decoration: none;
            outline: none;
            background-color: aqua;
            border: 0;*/
            display: inline-block;
         
         }
         .las:hover{
            transform: rotate(150deg);
            transition: background-image 5s ease-in-out;
            background-image: url(imag/OIP-C\ \(1\).jfif),url(imag/OIP-C\ \(2\).jfif);/*两张图片无法完全出现，想要出现，需要用到动画*/
           
         }
    </style>
</head>
<body>
    <div class="four"><a href="https://www.douyin.com/?recommend=1"></a></div>/*插入链接失败*/
    <a href="https://www.douyin.com/?recommend=1" class="two"></a>
    <a href="https://www.baidu.com/index.htm" class="one"></a>
    <a href="https://cn.bing.com/search?q=123%E5%A5%BD%E5%A5%BD%E7%BD%91&form=ANNTH1&refig=67838b42aa2e4721964f1cc820fe304e&pc=LCTS&ucpdpc=UCPD&adppc=EdgeStart&pqlth=0&assgl=6&sgcn=123%E5%A5%BD%E5%A5%BD%E7%BD%91&qs=HS&smvpcn=0&swbcn=10&sctcn=0&sc=10-0&sp=3&ghc=0&cvid=67838b42aa2e4721964f1cc820fe304e&clckatsg=1&hsmssg=0"class="three"></a>
     <div class="five"></div>
     <div class="six"></div>
     <div class="for"></div>
     <div class="love">你好</div>
     <div class="hope"></div>
     <a href="https://www.hao123.com/" class="las"></a>
</body>
</html>